<template>

	<!--顶部新增、查询-->
    <div style="margin-bottom: 10px;">
        <el-button type="primary" style="margin-right: 10px;" @click= "AddSupplierClick">新增供应商</el-button>
        <el-input v-model="SupplierSearchInput" style="width: 240px" placeholder="按供应商编号搜索" :prefix-icon="Search"/>
    </div>
  
	<!--供应商数据展示表格-->
	<el-table :data="GetSupplierData" style="width: 100%" highlight-current-row>
		<el-table-column fixed prop="supplierId" label="供应商ID" align="center"/>
		<el-table-column prop="supplierName" label="供应商名称" align="center"/>
		<el-table-column prop="supplierPhone" label="联系电话" align="center"/>
		<el-table-column prop="supplierAddress" label="地址"  align="center"/>
		<el-table-column prop="supplierState" label="合作状态" align="center"/>
		<el-table-column fixed="right" label="操作" min-width="100" align="center">
			<template #default="scope">
				<el-button size="small" @click="EditSupplierClick(scope.row)">
					修改
				</el-button>
				<el-button size="small" type="danger" @click="DeleteSupplierClick(scope.row)">
					删除
				</el-button>
			</template>
		</el-table-column>

		<template #empty>
			<el-empty description="暂无供应商数据" />
		</template>
	</el-table>

	<!-- 删除对话框 -->
	<el-dialog v-model="DeleteSuppliereDialog" title="删除供应商" width="500">
		<span>是否确定删除该供应商？</span><br>
		<span>供应商ID: {{ RowSupplierData.supplierId }}</span><br>
		<span>供应商名称: {{ RowSupplierData.supplierName }}</span>
		<template #footer>
		<div class="dialog-footer">
			<el-button @click="DeleteSuppliereDialog = false">取消</el-button>
			<el-button type="primary" @click="DeleteSupplier">确定</el-button>
		</div>
		</template>
	</el-dialog>

  <!-- 修改对话框 -->
	<el-dialog v-model="EditSupplierDialog" title="修改供应商" width="500">
		<el-form :model="PutSupplierData">
		<el-form-item label="供应商名称">
			<el-input v-model="PutSupplierData.supplierName" />
		</el-form-item>
		<el-form-item label="联系电话">
			<el-input v-model="PutSupplierData.supplierPhone" />
		</el-form-item>
		<el-form-item label="地址">
			<el-input v-model="PutSupplierData.supplierAddress" type="textarea" />
		</el-form-item>
		<el-form-item label="合作状态">
			<el-select v-model="PutSupplierData.supplierState" placeholder="请选择状态">
			<el-option label="合作中" value="合作中" />
			<el-option label="已终止" value="已终止" />
			</el-select>
		</el-form-item>
		</el-form>
		<template #footer>
		<div class="dialog-footer">
			<el-button @click="EditSupplierDialog = false">取消</el-button>
			<el-button type="primary" @click="editSupplier">确定</el-button>
		</div>
		</template>
	</el-dialog>

	<!-- 新增对话框 -->
	<el-dialog v-model="AddSupplierDialog" title="新增供应商" width="500">
		<el-form :model="PostSupplierData">
		<el-form-item label="供应商名称">
			<el-input v-model="PostSupplierData.supplierName" />
		</el-form-item>
		<el-form-item label="联系电话">
			<el-input v-model="PostSupplierData.supplierPhone" />
		</el-form-item>
		<el-form-item label="地址">
			<el-input v-model="PostSupplierData.supplierAddress" type="textarea" />
		</el-form-item>
		<el-form-item label="合作状态">
			<el-select v-model="PostSupplierData.supplierState" placeholder="请选择状态">
			<el-option label="合作中" value="合作中" />
			<el-option label="已终止" value="已终止" />
			</el-select>
		</el-form-item>
		</el-form>
		<template #footer>
		<div class="dialog-footer">
			<el-button @click="AddSupplierDialog = false">取消</el-button>
			<el-button type="primary" @click="addSupplier">确定</el-button>
		</div>
		</template>
	</el-dialog>
</template>

<script lang='ts' setup name='Supplier'>

// 导入必要组件
import axios from 'axios';
import { reactive, ref, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 生命周期钩子，组件挂载后初始化数据
onMounted(async () => {
  await GetSuppliers()
})

// 对话框显示参数
const DeleteSuppliereDialog = ref(false)
const EditSupplierDialog = ref(false)
const AddSupplierDialog = ref(false)

// 表格单行供应商数据
let RowSupplierData = reactive({
	supplierId: 0,
	supplierName: '',
	supplierPhone: '',
	supplierAddress: '',
	supplierState: ''
})

// 表单验证
function validateForm(formData: any) {
  if (!formData.supplierName?.trim()) {
    ElNotification({ title: '错误', message: '供应商名称必填', type: 'error' })
    return false
  }
  return true
}

// 添加供应商回调
function AddSupplierClick() {

	// 重置新增表单数据
	Object.assign(PostSupplierData, {
		supplierId: 0,
		supplierName: '',
		supplierPhone: '',
		supplierAddress: '',
		supplierState: ''
	})

	// 打开对话框
  	AddSupplierDialog.value = true
}

// 修改供应商回调
async function EditSupplierClick(row: any) {

	// 请求数据
	try {

		// 存储当前行ID
		RowSupplierData.supplierId = row.supplierId

		// 发送GET请求获取供应商详细信息
		const response = await axios.get(`/api/supplier/${row.supplierId}`)

		// 将获取的数据复制到编辑表单
		console.log(response.data)
		Object.assign(PutSupplierData, response.data.data)
		console.log(PutSupplierData)
		EditSupplierDialog.value = true
	} catch (error) {
		ElNotification({ title: '错误', message: '获取供应商信息失败', type: 'error' })
	} 
}

// 删除供应商回调
function DeleteSupplierClick(row: any) {

	// 保存行数据
	RowSupplierData = row

	// 打开对话框
	DeleteSuppliereDialog.value = true
}

// GET ------------------------------------------ GET //

// GET: 获取的供应商数据
const GetSupplierData = ref([])

// GET: 获取供应商数据
async function GetSuppliers() {
	try {
		const response = await axios.get("/api/supplier")
		GetSupplierData.value = response.data.data || []
		console.log(GetSupplierData.value)
	} catch (error) {
		ElNotification({ 
			title: '错误', 
			message: '获取供应商列表失败'+error, 
			type: 'error' 
		})
	}
}

// GET: 获取编号供应商数据
async function GetSuppliersById(){
	try {
		const response = await axios.get(`/api/supplier/${RowSupplierData.supplierId}`)
		GetSupplierData.value = response.data.data || []
		console.log(GetSupplierData.value)
	} catch (error) {
		ElNotification({ 
			title: '错误', 
			message: '获取供应商列表失败'+error, 
			type: 'error' 
		})
	}
}

// 输入框接收到的供应商编号
let SupplierSearchInput = ref('')

// 随时查询
watch(
	SupplierSearchInput, (New, Old) => {
		GetSuppliersById()
	}
)

// POST ------------------------------------------ POST //

// POST: 添加的供应商数据
const PostSupplierData = reactive({
	supplierId: 0,
	supplierName: '',
	supplierPhone: '',
	supplierAddress: '',
	supplierState: ''
})

// POST: 添加供应商数据
async function addSupplier() {

	// 表单检验
	if (!validateForm(PostSupplierData)){return}

	// 发送请求
	try {
		await axios.post("/api/supplier", PostSupplierData)
		ElNotification({ title: '成功', message: '新增成功', type: 'success' })
		await GetSuppliers()
	} catch (error) {
		ElNotification({ title: '错误', message: '新增失败', type: 'error' })
	}

	// 关闭对话框
	AddSupplierDialog.value = false
}

// PUT ------------------------------------------ PUT //

// PUT: 修改的供应商数据
const PutSupplierData = reactive({
	supplierId: 0,
	supplierName: '',
	supplierPhone: '',
	supplierAddress: '',
	supplierState: ''
})

// PUT: 修改供应商数据


// PUT: 修改供应商数据
async function editSupplier() {

	// 表单检验
	if (!validateForm(PutSupplierData)){return}

	// 发送请求
	try {
		await axios.put(`/api/supplier/${PutSupplierData.supplierId}`, {
		supplierName: PutSupplierData.supplierName,
		supplierPhone: PutSupplierData.supplierPhone,
		supplierAddress: PutSupplierData.supplierAddress,
		supplierState: PutSupplierData.supplierState
		})
		ElNotification({ title: '成功', message: '修改成功', type: 'success' })
		await GetSuppliers()
	} catch (error) {
		ElNotification({ title: '错误', message: '修改失败', type: 'error' })
	}

	// 关闭对话框
	EditSupplierDialog.value = false
}

// DELETE ------------------------------------------ DELETE //

// DELETE: 删除供应商数据
async function DeleteSupplier() {
	try {
		await axios.delete(`/api/supplier/${SupplierSearchInput}`)
		ElNotification({ title: '成功', message: '删除成功', type: 'success' })
		await GetSuppliers()
	} catch (error) {
		ElNotification({ title: '错误', message: '删除失败', type: 'error' })
	}
	DeleteSuppliereDialog.value = false
}

</script>

<style scoped>

/* 表格居中设置 */
.el-table-column {
    text-align: center;
}

</style>    